<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 头 -->
          <el-tab-pane label="角色管理" name="first">
            <!-- 新增角色按钮 -->
            <el-row>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="showDialog = true"
                >新增角色</el-button
              >
            </el-row>
            <!-- 下面表格 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="角色名" width="180">
              </el-table-column>
              <el-table-column prop="description" label="描述">
              </el-table-column>
              <el-table-column prop="description" label="操作">
                <template slot-scope="{ row }">
                  <el-link type="primary">分配</el-link>
                  <el-link
                    type="primary"
                    style="margin:0 5px"
                    @click="doEdit(row.id)"
                    >修改</el-link
                  >
                  <el-link type="primary" @click="doDel(row.id)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="getRoleList"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pagesize"
              layout="total, prev, pager, next"
              :total="pageInfo.total"
              style="text-align:center;"
            >
            </el-pagination>
          </el-tab-pane>

          <!-- 公司信息 -->
          <el-tab-pane label="公司信息" name="second">
            <el-form
              ref="form"
              :model="comForm"
              label-width="80px"
              style="width:450px;margin:0 100px;"
            >
              <el-form-item label="企业名称">
                <el-input disabled v-model="comForm.name"></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input disabled v-model="comForm.companyAddress"></el-input>
              </el-form-item>
              <el-form-item label="公司电话">
                <el-input disabled v-model="comForm.companyPhone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input disabled v-model="comForm.mailbox"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input disabled v-model="comForm.remarks"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 新增角色弹框 -->
      <el-dialog :visible.sync="showDialog" :title="title">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="addRules"
          label-width="150px"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="addForm.description"></el-input>
          </el-form-item>
          <el-row type="flex" justify="center">
            <el-button type="primary" @click="save">确定</el-button>
            <el-button @click="cancelShow">取消</el-button>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getRoleList,
  delRole,
  getxinxi,
  addRole,
  editRole,
  getRoleDetail,
  getgetCompanyDetail
} from '@/api/shezhi'
//辅助函数
import { mapGetters } from 'vuex'
export default {
  name: 'shezhi',
  data () {
    return {
      comForm: {},
      showDialog: false,

      addForm: {},
      activeName: 'first',
      tableData: [],
      form: {},
      pageInfo: {
        page: 1,
        pagesize: 2,
        total: 0
      },
      addRules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getRoleList()
    this.getxinxi()
  },
  computed: {
    title () {
      return this.addForm.id ? '修改角色' : '新增角色'
    },
    ...mapGetters(['companyId'])
  },
  methods: {
    //获取公司信息
    async getxinxi () {
      let res = await getxinxi(this.companyId)
      this.comForm = res.data
    },

    async getRoleList () {
      //发起请
      let res = await getRoleList(this.pageInfo)
      // console.log(res)
      this.tableData = res.data.rows
      this.pageInfo.total = res.data.total
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    //删除点击事件
    async doDel (id) {
      //
      try {
        await this.$confirm('确认要删除吗?')
        await delRole(id)
        //重新调用获取删除后新的数据
        this.getRoleList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 确定点击事件
    save () {
      this.$refs.addForm.validate(async v => {
        if (v) {
          if (this.addForm.id) {
            //发请求
            await editRole(this.addForm)
          } else {
            //发起请求
            await addRole(this.addForm)
          }
          //重新获取信息
          this.getRoleList()
          //提示
          this.$message.success(this.title + '新增成功')
          //隐藏弹框
          this.showDialog = false
        }
      })
    },
    //取消点击事件
    cancelShow () {
      this.addForm = {}
      this.$refs.addForm.resetFields()
      this.showDialog = false
    },
    //修改按钮点击事件
    async doEdit (id) {
      let res = await getRoleDetail(id)
      this.addForm = res.data
      this.showDialog = true
    }
  }
}
</script>

<style>
.app-container {
  margin: 150px 125px;
}
.el-tabs__content {
  padding: 40px 20px;
}
</style>
